<template>
  <el-card class="box-card" shadow="hover">
    <div slot="header" class="header">
      <span class="header_title">根据表型号统计户表总数</span>
    </div>
    <div id="main" ref="main">
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons')
import { xbCountByType } from "../../../api/index/meteread";
import { pieEchartSetting } from "./pieechartsetting";
export default {
  name: "MonthDosageStatisticsEcharts",
  data() {
    return {
      dataList: [],
      chartExtend: pieEchartSetting,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 初始化图表
    async initEchart() {
      let myChart = echarts.init(this.$refs.main)
      this.chartExtend.series[0].name = '详细信息'
      myChart.setOption(this.chartExtend, true)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    // 获取数据
    getList() {
      xbCountByType().then(response => {
        if(response.code === 200) {
          this.dataList = response.data
          this.renderChart(this.dataList)
        }
      })
    },
    // 处理数据
    renderChart(res){
      let seriesList = []
      let legendList = []
      res.forEach(item => {
        let echartsObj = {}
        echartsObj.name = item.typeName
        echartsObj.value = item.count
        legendList.push(echartsObj.name)
        seriesList.push(echartsObj)
        this.chartExtend.series[0].data = seriesList
        // this.chartExtend.legend.data = legendList
      })
      this.initEchart()
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card__header {
  padding: 14px 15px 7px 20px !important;
}

//.header{
//  display: flex;
//  height: 20px;
//}
.header_title{
  border-left: 5px solid #1c84c6;
  padding: 0 0 0 20px;
  font-size: 1.7vh;
  //flex: 1;
}

.card-content{
  height: 20vh;
}

::v-deep .el-card__body {
  height: 22vh !important;
}
#main{
  height: 100%;
  width: 100%;
}
</style>
